﻿@page "/ComboBox/Custom-Value"

@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.Data;

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the custom value functionalities of the ComboBox. When the typed character(s) is not present in the list, a button will be shown in the popup list. By clicking on this button, the custom value character is added in the existing list as a new item.</p>
</SampleDescription>
<ActionDescription>
    <p>The ComboBox allows the user to give input as <code>custom value</code> which is not required to present in the predefined set of values. By default, this support is enabled by <code>AllowCustom</code> property. In this case, both text field and value field are considered as same. The custom value will be sent to post back handler when a form is about to be submitted.</p>
</ActionDescription>

<div class="col-lg-12 control-section" style="height: 400px;">
    <div class='control-wrapper'>
        <div style='padding-top:55px;'>
            <SfComboBox @ref="@ComboObj" TValue="string" Placeholder="Select a Country" TItem="TItem" DataSource="@DataSource" AllowCustom="true" AllowFiltering="true">
                <ComboBoxFieldSettings Text="Name" Value="Name"></ComboBoxFieldSettings>
                <ComboBoxEvents TValue="string" Filtering="@OnFiltering" TItem="TItem"></ComboBoxEvents>
                <ComboBoxTemplates TItem="TItem">
                    <NoRecordsTemplate>
                        <div>
                            <div id="nodata">No matched item, do you want to add it as new item in list?</div>
                            <SfButton id="btn" class="e-control e-btn" style="margin-top: 10px" @onclick="@AddItem">ADD NEW ITEM</SfButton>
                        </div>
                    </NoRecordsTemplate>
                </ComboBoxTemplates>
            </SfComboBox>
        </div>
    </div>
</div>

<style>

    .control-wrapper {
        margin: 0 auto;
        width: 300px;
    }

</style>

@code {
    private SfComboBox<string, TItem> ComboObj;
    private string Custom { get; set; }
    private List<TItem> CustomDataItems { get; set; } = new List<TItem>();
    public class TItem
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }
    private async Task OnFiltering(Syncfusion.Blazor.DropDowns.FilteringEventArgs args)
    {
        Custom = args.Text;
        args.PreventDefaultAction = true;
        var query = new Query().Where(new WhereFilter() { Field = "Name", Operator = "contains", value = args.Text, IgnoreCase = true });
        query = !string.IsNullOrEmpty(args.Text) ? query : new Query();
        await ComboObj.FilterAsync(CustomDataItems, query);
    }
    private List<TItem> DataSource = new List<TItem>
    {
        new TItem() { Name = "Australia", Code = "AU" },
        new TItem() { Name = "Bermuda", Code = "BM" },
        new TItem() { Name = "Canada", Code = "CA" },
        new TItem() { Name = "Cameroon", Code = "CM" },
        new TItem() { Name = "Denmark", Code = "DK" },
        new TItem() { Name = "France", Code = "FR" },
        new TItem() { Name = "Finland", Code = "FI" },
        new TItem() { Name = "Germany", Code = "DE" },
        new TItem() { Name = "Greenland", Code = "GL" },
        new TItem() { Name = "Hong Kong", Code = "HK" },
        new TItem() { Name = "India", Code = "IN" },
        new TItem() { Name = "Italy", Code = "IT" }

    };
    protected override void OnInitialized()
    {
        CustomDataItems = DataSource;
    }

    private async Task AddItem()
    {
        var customData = new TItem() { Name = Custom, Code = Custom };
        await this.ComboObj.AddItems(new List<TItem> { customData });
        CustomDataItems.Add(customData);
        await this.ComboObj.HidePopupAsync();
    } 
}
